<template>
  <div class="module-container" v-loading="false">
    <el-row :gutter="36">
      <el-col :md="12" :sm="24">
        <div class="card">
          <div class="card-header">ZUUU</div>
          <div class="card-body">
            <!-- ZUUU CCO -->
            <div
              class="command-button button-basic"
              :class="[
                operationStatus.zuuu.cco.status
                  ? 'button-active'
                  : 'button-inactive',
              ]"
              @click="handleToggleStatus('zuuu', 'cco')"
            >
              <div class="button-content-container">
                <div class="button-content-title">CCO</div>
                <div class="button-content-info">
                  当前状态：{{
                    operationStatus.zuuu.cco.status ? "开启" : "关闭"
                  }}
                </div>
                <div
                  class="button-content-info"
                  v-if="operationStatus.zuuu.cco.status"
                >
                  开始时间：{{ operationStatus.zuuu.cco.startTime }}
                </div>
                <div class="button-content-info" v-else>
                  结束时间：{{ operationStatus.zuuu.cco.endTime }}
                </div>
              </div>
            </div>
            <!-- ZUUU CDO -->
            <div
              :class="[
                operationStatus.zuuu.cdo.status
                  ? 'button-active'
                  : 'button-inactive',
              ]"
              class="command-button button-basic"
              @click="handleToggleStatus('zuuu', 'cdo')"
            >
              <div class="button-content-container">
                <div class="button-content-title">CDO</div>
                <div class="button-content-info">
                  当前状态：{{
                    operationStatus.zuuu.cdo.status ? "开启" : "关闭"
                  }}
                </div>
                <div
                  class="button-content-info"
                  v-if="operationStatus.zuuu.cdo.status"
                >
                  开始时间：{{ operationStatus.zuuu.cdo.startTime }}
                </div>
                <div class="button-content-info" v-else>
                  结束时间：{{ operationStatus.zuuu.cdo.endTime }}
                </div>
              </div>
            </div>
            <!-- ZUUU VA -->
            <div
              :class="[
                operationStatus.zuuu.va.status
                  ? 'button-active'
                  : 'button-inactive',
              ]"
              class="command-button button-basic"
              @click="handleToggleStatus('zuuu', 'va')"
            >
              <div class="button-content-container">
                <div class="button-content-title">VA</div>
                <div class="button-content-info">
                  当前状态：{{
                    operationStatus.zuuu.va.status ? "开启" : "关闭"
                  }}
                </div>
                <div
                  class="button-content-info"
                  v-if="operationStatus.zuuu.va.status"
                >
                  开始时间：{{ operationStatus.zuuu.va.startTime }}
                </div>
                <div class="button-content-info" v-else>
                  结束时间：{{ operationStatus.zuuu.va.endTime }}
                </div>
              </div>
            </div>
          </div>
          <!-- <template #footer><div class="card-footer"></div> -->
        </div>
      </el-col>
      <el-col :md="12" :sm="24">
        <div class="card">
          <div class="card-header">ZUTF</div>

          <div class="card-body">
            <!-- ZUTF CCD -->
            <div
              :class="[
                operationStatus.zutf.cco.status
                  ? 'button-active'
                  : 'button-inactive',
              ]"
              class="command-button button-basic"
              @click="handleToggleStatus('zutf', 'cco')"
            >
              <div class="button-content-container">
                <div class="button-content-title">CCO</div>
                <div class="button-content-info">
                  当前状态：{{
                    operationStatus.zutf.cco.status ? "开启" : "关闭"
                  }}
                </div>
                <div
                  class="button-content-info"
                  v-if="operationStatus.zutf.cco.status"
                >
                  开始时间：{{ operationStatus.zutf.cco.startTime }}
                </div>
                <div class="button-content-info" v-else>
                  结束时间：{{ operationStatus.zutf.cco.endTime }}
                </div>
              </div>
            </div>
            <!-- ZUTF CDO -->
            <div
              :class="[
                operationStatus.zutf.cdo.status
                  ? 'button-active'
                  : 'button-inactive',
              ]"
              class="command-button button-basic"
              @click="handleToggleStatus('zutf', 'cdo')"
            >
              <div class="button-content-container">
                <div class="button-content-title">CDO</div>
                <div class="button-content-info">
                  当前状态：{{
                    operationStatus.zutf.cdo.status ? "开启" : "关闭"
                  }}
                </div>
                <div
                  class="button-content-info"
                  v-if="operationStatus.zutf.cdo.status"
                >
                  开始时间：{{ operationStatus.zutf.cdo.startTime }}
                </div>
                <div class="button-content-info" v-else>
                  结束时间：{{ operationStatus.zutf.cdo.endTime }}
                </div>
              </div>
            </div>
            <!-- ZUTF PMS -->
            <div
              :class="[
                operationStatus.zutf.pms.status
                  ? 'button-active'
                  : 'button-inactive',
              ]"
              class="command-button button-basic"
              @click="handleToggleStatus('zutf', 'pms')"
            >
              <div class="button-content-container">
                <div class="button-content-title">PMS</div>
                <div class="button-content-info">
                  当前状态：{{
                    operationStatus.zutf.pms.status ? "开启" : "关闭"
                  }}
                </div>
                <div
                  class="button-content-info"
                  v-if="operationStatus.zutf.pms.status"
                >
                  开始时间：{{ operationStatus.zutf.pms.startTime }}
                </div>
                <div class="button-content-info" v-else>
                  结束时间：{{ operationStatus.zutf.pms.endTime }}
                </div>
              </div>
            </div>
            <!-- ZUTF VA -->
            <div
              :class="[
                operationStatus.zutf.va.status
                  ? 'button-active'
                  : 'button-inactive',
              ]"
              class="command-button button-basic"
              @click="handleToggleStatus('zutf', 'va')"
            >
              <div class="button-content-container">
                <div class="button-content-title">VA</div>
                <div class="button-content-info">
                  当前状态：{{
                    operationStatus.zutf.va.status ? "开启" : "关闭"
                  }}
                </div>
                <div
                  class="button-content-info"
                  v-if="operationStatus.zutf.va.status"
                >
                  开始时间：{{ operationStatus.zutf.va.startTime }}
                </div>
                <div class="button-content-info" v-else>
                  结束时间：{{ operationStatus.zutf.va.endTime }}
                </div>
              </div>
            </div>
          </div>
          <!-- <template #footer><div class="card-footer"></div> -->
        </div>
      </el-col>
      <el-col :div="24">
        <el-divider />
        <div class="status">
          <span>状态更新时间：{{ lastRefreshTime }}&nbsp;</span>
          <el-button type="primary" link circle @click="handleRefreshStatus()">
            <el-icon :class="[isLoading ? 'is-loading' : '']"
              ><Refresh
            /></el-icon>
          </el-button>
          <el-tag v-if="isLoading">更新中...</el-tag>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, computed, h, onMounted, onUnmounted } from "vue";
import dayjs from "dayjs";
import { ElMessage, ElMessageBox, ElNotification } from "element-plus";
import axios from "axios";

const operationStatus = ref({
  zuuu: {
    cco: {
      status: false,
      startTime: "",
      endTime: "",
    },
    cdo: {
      status: false,
      startTime: "",
      endTime: "",
    },
    va: {
      status: false,
      startTime: "",
      endTime: "",
    },
  },
  zutf: {
    cco: {
      status: false,
      startTime: "",
      endTime: "",
    },
    cdo: {
      status: false,
      startTime: "",
      endTime: "",
    },
    pms: {
      status: false,
      startTime: "",
      endTime: "",
    },
    va: {
      status: false,
      startTime: "",
      endTime: "",
    },
  },
});

const isLoading = ref(false);
const lastRefreshTime = ref("");
const lastRefreshTimestamp = ref(0);
const handleRefreshStatus = () => {
  isLoading.value = true;
  axios
    .post("api/journal_cxo.php", {})
    .then((response) => {
      // console.log("Journal.CXO.handleRefreshStatus.response", response.data);
      const content = response.data.results;
      if (content) {
        // zuuu cco
        if (content.zuuu.cco.started == null) {
          operationStatus.value.zuuu.cco.status = false;
          operationStatus.value.zuuu.cco.startTime = "";
          operationStatus.value.zuuu.cco.endTime = "";
          if (content.zuuu.cco.ended != null) {
            operationStatus.value.zuuu.cco.startTime =
              content.zuuu.cco.ended.startTime;
            operationStatus.value.zuuu.cco.endTime =
              content.zuuu.cco.ended.endTime;
          }
        } else {
          operationStatus.value.zuuu.cco.status = true;
          operationStatus.value.zuuu.cco.startTime =
            content.zuuu.cco.started.startTime;
          operationStatus.value.zuuu.cco.endTime = "";
          if (content.zuuu.cco.ended != null) {
            operationStatus.value.zuuu.cco.endTime =
              content.zuuu.cco.ended.endTime;
          }
        }
        // zuuu cdo
        if (content.zuuu.cdo.started == null) {
          operationStatus.value.zuuu.cdo.status = false;
          operationStatus.value.zuuu.cdo.startTime = "";
          operationStatus.value.zuuu.cdo.endTime = "";
          if (content.zuuu.cdo.ended != null) {
            operationStatus.value.zuuu.cdo.startTime =
              content.zuuu.cdo.ended.startTime;
            operationStatus.value.zuuu.cdo.endTime =
              content.zuuu.cdo.ended.endTime;
          }
        } else {
          operationStatus.value.zuuu.cdo.status = true;
          operationStatus.value.zuuu.cdo.startTime =
            content.zuuu.cdo.started.startTime;
          operationStatus.value.zuuu.cdo.endTime = "";
          if (content.zuuu.cdo.ended != null) {
            operationStatus.value.zuuu.cdo.endTime =
              content.zuuu.cdo.ended.endTime;
          }
        }
        // zuuu va
        if (content.zuuu.va.started == null) {
          operationStatus.value.zuuu.va.status = false;
          operationStatus.value.zuuu.va.startTime = "";
          operationStatus.value.zuuu.va.endTime = "";
          if (content.zuuu.va.ended != null) {
            operationStatus.value.zuuu.va.startTime =
              content.zuuu.va.ended.startTime;
            operationStatus.value.zuuu.va.endTime =
              content.zuuu.va.ended.endTime;
          }
        } else {
          operationStatus.value.zuuu.va.status = true;
          operationStatus.value.zuuu.va.startTime =
            content.zuuu.va.started.startTime;
          operationStatus.value.zuuu.va.endTime = "";
          if (content.zuuu.va.ended != null) {
            operationStatus.value.zuuu.va.endTime =
              content.zuuu.va.ended.endTime;
          }
        }

        // zutf cco
        if (content.zutf.cco.started == null) {
          operationStatus.value.zutf.cco.status = false;
          operationStatus.value.zutf.cco.startTime = "";
          operationStatus.value.zutf.cco.endTime = "";
          if (content.zutf.cco.ended != null) {
            operationStatus.value.zutf.cco.startTime =
              content.zutf.cco.ended.startTime;
            operationStatus.value.zutf.cco.endTime =
              content.zutf.cco.ended.endTime;
          }
        } else {
          operationStatus.value.zutf.cco.status = true;
          operationStatus.value.zutf.cco.startTime =
            content.zutf.cco.started.startTime;
          operationStatus.value.zutf.cco.endTime = "";
          if (content.zutf.cco.ended != null) {
            operationStatus.value.zutf.cco.endTime =
              content.zutf.cco.ended.endTime;
          }
        }
        // zutf cdo
        if (content.zutf.cdo.started == null) {
          operationStatus.value.zutf.cdo.status = false;
          operationStatus.value.zutf.cdo.startTime = "";
          operationStatus.value.zutf.cdo.endTime = "";
          if (content.zutf.cdo.ended != null) {
            operationStatus.value.zutf.cdo.startTime =
              content.zutf.cdo.ended.startTime;
            operationStatus.value.zutf.cdo.endTime =
              content.zutf.cdo.ended.endTime;
          }
        } else {
          operationStatus.value.zutf.cdo.status = true;
          operationStatus.value.zutf.cdo.startTime =
            content.zutf.cdo.started.startTime;
          operationStatus.value.zutf.cdo.endTime = "";
          if (content.zutf.cdo.ended != null) {
            operationStatus.value.zutf.cdo.endTime =
              content.zutf.cdo.ended.endTime;
          }
        }
        // zutf pms
        if (content.zutf.pms.started == null) {
          operationStatus.value.zutf.pms.status = false;
          operationStatus.value.zutf.pms.startTime = "";
          operationStatus.value.zutf.pms.endTime = "";
          if (content.zutf.pms.ended != null) {
            operationStatus.value.zutf.pms.startTime =
              content.zutf.pms.ended.startTime;
            operationStatus.value.zutf.pms.endTime =
              content.zutf.pms.ended.endTime;
          }
        } else {
          operationStatus.value.zutf.pms.status = true;
          operationStatus.value.zutf.pms.startTime =
            content.zutf.pms.started.startTime;
          operationStatus.value.zutf.pms.endTime = "";
          if (content.zutf.pms.ended != null) {
            operationStatus.value.zutf.pms.endTime =
              content.zutf.pms.ended.endTime;
          }
        }
        if (content.zutf.va.started == null) {
          operationStatus.value.zutf.va.status = false;
          operationStatus.value.zutf.va.startTime = "";
          operationStatus.value.zutf.va.endTime = "";
          if (content.zutf.va.ended != null) {
            operationStatus.value.zutf.va.startTime =
              content.zutf.va.ended.startTime;
            operationStatus.value.zutf.va.endTime =
              content.zutf.va.ended.endTime;
          }
        } else {
          operationStatus.value.zutf.va.status = true;
          operationStatus.value.zutf.va.startTime =
            content.zutf.va.started.startTime;
          operationStatus.value.zutf.va.endTime = "";
          if (content.zutf.va.ended != null) {
            operationStatus.value.zutf.va.endTime =
              content.zutf.va.ended.endTime;
          }
        }
        // console.log();
        let day = dayjs();
        lastRefreshTimestamp.value = day.valueOf();
        lastRefreshTime.value = day.format("YYYY-MM-DD HH:mm:ss");
      }
    })
    .finally(() => {
      isLoading.value = false;
    });
};

const handleToggleStatus = (airport, operation) => {
  isLoading.value = true;
  const value = !operationStatus.value[airport][operation].status;
  const payload = {
    airport,
    operation,
    value,
    startTime: value ? dayjs().format("YYYY-MM-DD HH:mm:ss") : null,
    endTime: value ? null : dayjs().format("YYYY-MM-DD HH:mm:ss"),
  };
  axios
    .post("api/journal_cxo.php?method=save", payload)
    .then((response) => {
      handleRefreshStatus();
      console.log("api/journal_cxo.php?method=save", payload, response.data);
      if (response.data.result) {
        ElMessage({
          type: "success",
          message: "状态已保存",
        });
      }
    })
    .catch((error) => {
      isLoading.value = false;
      console.log("api/journal_cxo.php?method=save", error);
    });
};

const refreshTimer = ref(null);

onMounted(() => {
  handleRefreshStatus();
  if (!refreshTimer.value) {
    refreshTimer.value = setInterval(() => handleRefreshStatus(), 10000);
  }
});

onUnmounted(() => {
  if (refreshTimer.value) {
    clearInterval(refreshTimer.value);
    refreshTimer.value = null;
  }
});
</script>

<style scoped>
.module-container {
  padding: 1em;
}

.status {
  font-size: 12px;
  display: flex;
  align-items: center;
  color: var(--el-text-color-secondary);
}

.status > * {
  margin: 4px;
}

.card {
  border-radius: 2em;
  background-color: #0004;
  padding: 1em;
}

.card-header {
  width: 100%;
  color: var(--el-text-color-primary);
  font-size: 3em;
  font-weight: bolder;
  padding: 12px 0 12px 16px;
}

.card-body {
  width: 100%;
}

.card-footer {
  width: 100%;
}

.button-content-container {
  width: 100%;
  text-align: justify;
}

.button-content-title {
  font-size: 36px;
  font-weight: bolder;
  padding-bottom: 8px;
}

.button-content-info {
  font-size: 12px;
  padding: 4px 0;
}

.button-basic {
  display: inline-block;
  position: relative;
  width: 300px;
  height: auto;
  border-radius: 1em;
  padding: 0.75em 1.5em;
  margin: 1em;
  text-align: center;
  cursor: pointer;
  transition: all 0.25s ease-in-out;
}

.button-inactive:hover {
  background-color: #4c4f6b;
}
.button-active:hover {
  background-color: #2c2f3b;
}

.button-inactive {
  background: #3c3f5b;
  color: var(--el-text-color-secondary);
}

/* Border Animation */

.button-active {
  background: #1c1f2b;

  color: var(--el-text-color-primary);
}

/* 边框代码 */
@property --angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

.button-active::after,
.button-active::before {
  content: "";
  position: absolute;
  height: 100%;
  width: 100%;
  background-image: conic-gradient(
    from var(--angle),
    #0000,
    #00ff99,
    #0000,
    #006aff,
    #0000
  );
  /* background-image: conic-gradient(
    from var(--angle),
    #ff4545,
    #00ff99,
    #006aff,
    #ff0095,
    #ff4545
  ); */
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  z-index: -1;
  padding: 3px;
  border-radius: 1em;
  animation: 3s spin linear infinite;
}

.button-active::before {
  filter: blur(1.5rem);
  opacity: 0.5;
}

@keyframes spin {
  from {
    --angle: 0deg;
  }

  to {
    --angle: 360deg;
  }
}
</style>
